<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>报表生成 - 智驭安行系统</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="./css/data-report.css">
		<link rel="icon" href="./img/logo_nobackground.png" type="image/png">
	</head>
	<body>
		<div id="app">
			<!-- 页面头部 -->
			<header class="page-header">
				<div class="header-left">
					<h1>报表生成</h1>
					<el-breadcrumb separator="/">
						<el-breadcrumb-item>首页</el-breadcrumb-item>
						<el-breadcrumb-item>数据统计</el-breadcrumb-item>
						<el-breadcrumb-item>报表生成</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="header-right">
					<el-button-group>
						<el-button type="primary" @click="generateReport">
							<i class="el-icon-document-add"></i> 生成报表
						</el-button>
						<el-button type="success" @click="exportReport">
							<i class="el-icon-download"></i> 导出报表
						</el-button>
					</el-button-group>
				</div>
			</header>

			<!-- 主要内容区 -->
			<div class="main-content">
				<!-- 报表配置区域 -->
				<div class="report-config-section">
					<div class="config-header">
						<h3>报表配置</h3>
						<el-button type="text" @click="saveTemplate">
							<i class="el-icon-star-off"></i> 保存为模板
						</el-button>
					</div>
					<el-form :model="reportConfig" label-width="100px" class="config-form">
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="报表类型">
									<el-select v-model="reportConfig.type" placeholder="请选择报表类型">
										<el-option label="交通流量报表" value="traffic"></el-option>
										<el-option label="安全事件报表" value="safety"></el-option>
										<el-option label="车辆运行报表" value="vehicle"></el-option>
										<el-option label="综合统计报表" value="comprehensive"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="时间范围">
									<el-date-picker
										v-model="reportConfig.dateRange"
										type="daterange"
										range-separator="至"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="报表格式">
									<el-radio-group v-model="reportConfig.format">
										<el-radio label="excel">Excel</el-radio>
										<el-radio label="pdf">PDF</el-radio>
										<el-radio label="word">Word</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="数据粒度">
									<el-select v-model="reportConfig.granularity" placeholder="请选择数据粒度">
										<el-option label="小时" value="hour"></el-option>
										<el-option label="天" value="day"></el-option>
										<el-option label="周" value="week"></el-option>
										<el-option label="月" value="month"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="报表内容">
							<el-checkbox-group v-model="reportConfig.content">
								<el-checkbox label="trafficFlow">交通流量</el-checkbox>
								<el-checkbox label="safetyEvents">安全事件</el-checkbox>
								<el-checkbox label="vehicleStatus">车辆状态</el-checkbox>
								<el-checkbox label="congestionLevel">拥堵程度</el-checkbox>
								<el-checkbox label="statistics">统计分析</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item label="备注说明">
							<el-input
								type="textarea"
								v-model="reportConfig.remarks"
								:rows="3"
								placeholder="请输入报表备注说明">
							</el-input>
						</el-form-item>
					</el-form>
				</div>

				<!-- 报表预览区域 -->
				<div class="report-preview-section">
					<div class="preview-header">
						<h3>报表预览</h3>
						<div class="preview-actions">
							<el-button-group>
								<el-button size="mini" @click="refreshPreview">
									<i class="el-icon-refresh"></i> 刷新
								</el-button>
								<el-button size="mini" @click="printPreview">
									<i class="el-icon-printer"></i> 打印
								</el-button>
							</el-button-group>
						</div>
					</div>
					<div class="preview-content" v-loading="previewLoading">
						<div class="preview-placeholder" v-if="!hasPreview">
							<i class="el-icon-document"></i>
							<p>请配置报表参数并点击生成报表</p>
						</div>
						<div class="preview-document" v-else>
							<!-- 报表预览内容 -->
							<div class="report-header">
								<h2>{{ reportConfig.type }}报表</h2>
								<p>生成时间：{{ currentTime }}</p>
							</div>
							<div class="report-body">
								<!-- 这里将根据报表类型显示不同的预览内容 -->
								<div class="preview-charts">
									<div class="chart-item">
										<div class="chart-title">交通流量趋势</div>
										<div class="chart-placeholder">
											<i class="el-icon-data-line"></i>
											<p>交通流量趋势图表</p>
										</div>
									</div>
									<div class="chart-item">
										<div class="chart-title">安全事件分布</div>
										<div class="chart-placeholder">
											<i class="el-icon-pie-chart"></i>
											<p>安全事件分布图表</p>
										</div>
									</div>
								</div>
								<div class="preview-table">
									<el-table :data="previewData" style="width: 100%">
										<el-table-column prop="date" label="日期" width="180"></el-table-column>
										<el-table-column prop="trafficVolume" label="交通流量" width="120"></el-table-column>
										<el-table-column prop="safetyEvents" label="安全事件" width="120"></el-table-column>
										<el-table-column prop="congestionLevel" label="拥堵程度" width="120"></el-table-column>
										<el-table-column prop="remarks" label="备注"></el-table-column>
									</el-table>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 历史报表列表 -->
				<div class="history-section">
					<div class="section-header">
						<h3>历史报表</h3>
						<el-input
							placeholder="搜索报表"
							v-model="searchQuery"
							prefix-icon="el-icon-search"
							style="width: 200px">
						</el-input>
					</div>
					<el-table :data="historyReports" style="width: 100%">
						<el-table-column prop="name" label="报表名称" width="200"></el-table-column>
						<el-table-column prop="type" label="报表类型" width="120"></el-table-column>
						<el-table-column prop="createTime" label="生成时间" width="180"></el-table-column>
						<el-table-column prop="format" label="格式" width="100"></el-table-column>
						<el-table-column prop="size" label="大小" width="100"></el-table-column>
						<el-table-column label="操作" width="200">
							<template slot-scope="scope">
								<el-button type="text" @click="viewReport(scope.row)">查看</el-button>
								<el-button type="text" @click="downloadReport(scope.row)">下载</el-button>
								<el-button type="text" @click="deleteReport(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-container">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage"
							:page-sizes="[10, 20, 50, 100]"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						// 报表配置
						reportConfig: {
							type: '',
							dateRange: [],
							format: 'excel',
							granularity: 'day',
							content: ['trafficFlow', 'safetyEvents'],
							remarks: ''
						},

						// 预览状态
						previewLoading: false,
						hasPreview: false,
						currentTime: new Date().toLocaleString(),

						// 预览数据
						previewData: [
							{
								date: '2024-03-20',
								trafficVolume: '123,456',
								safetyEvents: '5',
								congestionLevel: '轻度拥堵',
								remarks: '早高峰期间交通流量较大'
							},
							{
								date: '2024-03-19',
								trafficVolume: '118,234',
								safetyEvents: '3',
								congestionLevel: '畅通',
								remarks: '交通状况良好'
							}
						],

						// 历史报表
						historyReports: [
							{
								name: '3月交通流量报表',
								type: '交通流量报表',
								createTime: '2024-03-20 14:30',
								format: 'Excel',
								size: '2.5MB'
							},
							{
								name: '3月安全事件报表',
								type: '安全事件报表',
								createTime: '2024-03-19 16:45',
								format: 'PDF',
								size: '1.8MB'
							}
						],

						// 搜索
						searchQuery: '',

						// 分页
						currentPage: 1,
						pageSize: 10,
						total: 0
					}
				},
				methods: {
					// 生成报表
					generateReport() {
						this.previewLoading = true;
						setTimeout(() => {
							this.hasPreview = true;
							this.previewLoading = false;
							this.$message.success('报表生成成功');
						}, 1500);
					},

					// 导出报表
					exportReport() {
						this.$message.success('报表导出中...');
						// TODO: 实现报表导出逻辑
					},

					// 保存模板
					saveTemplate() {
						this.$message.success('报表模板保存成功');
						// TODO: 实现模板保存逻辑
					},

					// 刷新预览
					refreshPreview() {
						this.previewLoading = true;
						setTimeout(() => {
							this.previewLoading = false;
							this.$message.success('预览已刷新');
						}, 1000);
					},

					// 打印预览
					printPreview() {
						this.$message.info('准备打印...');
						// TODO: 实现打印功能
					},

					// 查看报表
					viewReport(report) {
						this.$message.info(`查看报表：${report.name}`);
						// TODO: 实现报表查看逻辑
					},

					// 下载报表
					downloadReport(report) {
						this.$message.success(`下载报表：${report.name}`);
						// TODO: 实现报表下载逻辑
					},

					// 删除报表
					deleteReport(report) {
						this.$confirm(`确定要删除报表"${report.name}"吗？`, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$message.success('报表已删除');
							// TODO: 实现报表删除逻辑
						});
					},

					// 处理分页大小变化
					handleSizeChange(val) {
						this.pageSize = val;
						// TODO: 重新加载数据
					},

					// 处理页码变化
					handleCurrentChange(val) {
						this.currentPage = val;
						// TODO: 重新加载数据
					}
				},
				mounted() {
					// 初始化数据
					this.total = this.historyReports.length;
				}
			});
		</script>
	</body>
</html>